<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card style="height:100%;">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane name="first">
              <span slot="label"> 换班申请 <i class="el-icon-refresh"></i></span>
              <!-- <el-card class="card_h"> -->
                <!-- <div>
                  <el-collapse accordion>
                    <el-collapse-item>
                      <template slot="title">
                        <i class="header-icon el-icon-s-help"></i>&nbsp;
                        我的申请
                      </template>
                      <el-table :data="requestData">

                      </el-table>
                    </el-collapse-item>
                    <el-collapse-item>
                      <template slot="title">
                        <i class="header-icon el-icon-phone"></i>&nbsp;
                        我的应答
                      </template>
                      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                    </el-collapse-item>
                    <el-collapse-item>
                      <template slot="title">
                        <i class="header-icon el-icon-success"></i>&nbsp;
                        我的审批
                      </template>
                      <div>简化流程：设计简洁直观的操作流程；</div>
                      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                    </el-collapse-item>
                    <el-collapse-item>
                      <template slot="title">
                        <i class="header-icon el-icon-time"></i>&nbsp;
                        历史记录
                      </template>
                      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                    </el-collapse-item>
                  </el-collapse>
                </div> -->
                <my-change :isShow="false"></my-change>
              <!-- </el-card> -->
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label"> 休假申请 <i class="el-icon-info"></i></span>
              <!-- <el-card class="card_h">
                <div>
                  <el-collapse accordion>
                    <el-collapse-item>
                      <template slot="title">
                        <i class="header-icon el-icon-s-help"></i>&nbsp;
                        我的申请
                      </template>
                      <el-table :data="requestData">

                      </el-table>
                    </el-collapse-item>
                    <el-collapse-item>
                      <template slot="title">
                        <i class="header-icon el-icon-success"></i>&nbsp;
                        我的审批
                      </template>
                      <div>简化流程：设计简洁直观的操作流程；</div>
                      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                    </el-collapse-item>
                    <el-collapse-item>
                      <template slot="title">
                        <i class="header-icon el-icon-time"></i>&nbsp;
                        历史记录
                      </template>
                      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-card> -->
              <my-requestVacation :isShow="false"></my-requestVacation>
            </el-tab-pane>
            <el-tab-pane name="third">
              <span slot="label">我的班表 <i class="el-icon-time"></i> </span>
              <!-- <el-card class="card_h"> -->
                <my-class :isShow = true :agentId = agentId></my-class>
              <!-- </el-card> -->
            </el-tab-pane>
            <el-tab-pane name="fourth">
              <span slot="label">休假日历 <i class="el-icon-date v_date"></i></span>
              <el-card class="card_h cal_h" style="width:600px;">
                <el-calendar>
                  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                  <template slot="dateCell" slot-scope="{date, data}">
                    <p :class="data.isSelected ? 'is-selected' : ''">
                      {{ data.day.split('-').slice(1).join('-')}} {{ vacation.indexOf(data.day)!=-1? '😊事假' : ''}}
                    </p>
                  </template>
                </el-calendar>
              </el-card>
            </el-tab-pane>
            <el-tab-pane name="fifth">
              <span slot="label">休假信息 <i class="el-icon-date v_date"></i></span>
              <el-card class="card_h cal_h" style="width:100%;padding:8px;">
                <my-vacation></my-vacation>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <keep-alive>
      <component :is='dialogList.changepw' :option='dialogOptionChangepw'></component>
    </keep-alive>
  </div>
</template>

<script>
  import myClass from '../userScheduleManage/formalClass/formalClass'
  import myVacation from './component/vacation'
  import request from "@/common/utils/requestWFM";
  import toolBox from "@/common/utils/toolBox"
  import changepw from "./component/changepw";
  import myChange from '../userScheduleManage/changeSchedule/scheduleApplication'
  import myRequestVacation from '../userScheduleManage/vacationRequest/vacationRequest'
  import Query from '@/message/wfm/userScheduleManage/queryReuqestClass/queryRequest'
  import {
    getMenu
  } from "@/utils/auth";
  import {
    mapGetters
  } from "vuex";

  export default {
    components: {
      myClass,
      myVacation,
      myChange,
      myRequestVacation
    },
    data() {
      return {
        agentId: [this.$store.getters.UserNum],
        vacation: ['2019-10-10', '2019-11-10', '2019-10-11', '2019-10-21'],
        month: '',
        requestData: [],
        activeName: 'first',
        dialogList: {
          changepw
        },
        dialogOptionChangepw: {
          isShow: false
        },
        tableData: [],
        selfTodoList: [{
          id: "1",
          desc: "系统监测到您首次登录，为了您的安全，请修改密码"
        }],
        value1: "",
      };
    },
    mounted() {
      if (this.$store.getters.isFirstLoginFLag === "0") {
        this.isFirstLogin();
      }

    },
    computed: {
      ...mapGetters([
        "isFirstLoginFLag"
      ])
    },
    watch: {
      isFirstLoginFLag() { //在登录后数据都返回判断该用户是否为首次登录
        if (this.isFirstLoginFLag === "0") {
          this.isFirstLogin();
        }
      }
    },
    methods: {
      //首次登陆判断
      isFirstLogin() {
        console.log(this.isFirstLoginFLag, "isFirst")
        if (this.$store.getters.isFirstLoginFLag === "0") {
          this.$confirm("用户首次登陆,请修改密码", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              showCancelButton: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              showClose: false
            })
            .then(() => {
              this.dialogOptionChangepw.isShow = true;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        }
      }
    }
  };

</script>

<style scoped>
  .timeClass {
    font-weight: bold;
  }

  .el-card {
    margin-bottom: 10px;
  }

  .el-card.card_h {
    height: 100%;
  }

  /* .v_date{
  color: #409EFF;
} */
  .coll_h {
    height: 200px;
    overflow-y: auto;
    /* overflow-x: hidden; */
  }

  .coll_h::-webkit-scrollbar {
    display: none;
  }

  .infoMsg {
    font-size: 14px;
    color: #666666;
  }

  .infoMsg li {
    padding: 6px 0;
  }

</style>
<style>
  .is-selected {
    color: #1989FA;
  }

  .cal_h .el-card__body {
    padding: 0;
    /* 调整el-card */
  }

  .cal_h .__vev_calendar-wrapper .events-wrapper {
    display: none;
    /* 隐藏右侧面板 */
  }

  .cal_h .__vev_calendar-wrapper .cal-wrapper {
    padding: 0;
    width: 100%;
    /* 左侧日历位置调整 */
  }

  .cal_h .__vev_calendar-wrapper .cal-wrapper .cal-header>div {
    line-height: 5px;
    /* 头部line高度下调 */
  }

  .cal_h .__vev_calendar-wrapper .arrow-left.icon,
  .cal_h .__vev_calendar-wrapper .arrow-right.icon {
    margin-top: 5px;
    /* 左右箭头上调5px */
  }

  .cal_h .__vev_calendar-wrapper .cal-wrapper .cal-body .weeks .item {
    line-height: 40px;
    /* 星期调整 */
  }

  .cal_h .__vev_calendar-wrapper .cal-wrapper .date-num {
    line-height: 26px;
    /* 调整日历每天格子高度 */
  }

  .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item .is-event {
    width: 30px;
    height: 30px;
    margin-left: -14px;
    margin-top: -16px;
  }

  .c_tips {
    color: #999;
    font-size: 14px;
    margin-left: 10px;
  }

</style>
